/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/

'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  ScrollView,
  Alert,
  TouchableOpacity,
  Navigator
} from 'react-native';

import NavigationBar from 'react-native-navbar';
import ExampleList from './ExampleList.js'
//var HttpView = require('./http.js');

class firstPage extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }
  _pressButton() {
    const navigator = this.props.navigator;
    if(navigator) {
      navigator.push({
        name: 'ExampleList',
        component: ExampleList,
        params:{
          user:this.state.user,
          pwd:this.state.pwd,
          msg:this.state.user
        }
      })
    }
  }

  render() {

    const titleConfig = {
      title: '登录',
    };

    return (
      //  <ScrollView
      //  contentContainerStyle={{flex:1}}
      //  keyboardDismissMode='on-drag'
      //  keyboardShouldPersistTaps={false}
      //  >

      <View style={styles.container}>
      <NavigationBar
      style={styles.common}
      title={titleConfig} />

      <Image
      // source={{uri: 'http://***.png'}}
      source={require('./img/icon.png')}
      style={styles.logo}/>

      <TextInput
      ref={(username) => this.username = username}
      onFocus={() => this.username.focus()}
      style={styles.input}
      onChangeText={(text) => this.setState({user: text})}
      placeholder='请输入手机号'/>

      <TextInput
      ref={(password) => this.password = password}
      onFocus={() => this.password.focus()}
      onChangeText={(text) => this.setState({pwd: text})}
      style={styles.input}
      placeholder='请输入密码'
      secureTextEntry={true}/>

      <TouchableOpacity
      style={styles.btn}
      onPress={()=>this._pressButton()} >
      <Text style={styles.text}>登  录</Text>
      </TouchableOpacity>

      </View>
      //    </ScrollView>
    );
  }

  //  布局结束，开始写其他代码
  showDialog(title){
    Alert.alert(
      title,
      'My Alert Msg',
      [
        {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
        {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
        {text: 'OK', onPress: () => console.log('OK Pressed')},
      ]
    )
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF'
  },
  common:{
    marginLeft: 10,
    marginRight: 10,
  },
  logo: {
    width: 96,
    height: 96,
    alignSelf: 'center',
    marginTop: 100,
    marginBottom:25
  },
  input: {
    marginTop: 10,
    height: 40,
    marginLeft: 20,
    marginRight: 20,
    borderRadius: 5,
    borderWidth: 1,
    alignSelf: 'stretch',
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: 'lightblue'
  },
  text: {
    fontWeight: 'bold',
    fontSize: 14,
    color: '#FFF'
  },
  btn: {
    alignSelf: 'stretch',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#3333FF',
    height: 40,
    marginLeft: 20,
    marginRight: 20,
    borderRadius: 5,
    marginTop: 40
  }
});
export default firstPage
